<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-card class="box-card">
        <el-row>
          <el-col :span="5">
            <el-input placeholder="请输入内容" v-model="searchwords" clearable>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchdata()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-button
              icon="el-icon-refresh-left"
              @click="getdata()"
            ></el-button>
          </el-col>
        </el-row>
        <transition name="el-zoom-in-center">
          <el-table
            :data="datalist"
            height="500"
            border
            style="width: 100%; margin-top: 15px"
            v-show="show"
          >
            <el-table-column type="index" label="#"> </el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="catename" label="分类"></el-table-column>
            <el-table-column prop="busname" label="所属商家"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="ishot" label="状态" width="70">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.ishot == '1'" type="danger">
                  热门
                </el-tag>
                <el-tag v-else> 普通 </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showeditbox(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="info"
                  size="mini"
                  @click="showdetailbox(scope.row)"
                  >详细</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="deletedata(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </transition>
      </el-card>
    </template>
    <!-- 商品编辑 -->
    <el-dialog title="提示" :visible.sync="editVisible" width="30%">
      <span>编辑{{ edit.name }}</span>
      <span slot="footer" class="dialog-footer">
        <el-form
          label-width="80px"
          :model="edit"
          ref="editFormRef"
          :rules="editFormRules"
        >
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="edit.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="catename">
            <el-input v-model="edit.catename" disabled></el-input>
          </el-form-item>
          <el-form-item label="商店名称" prop="busname">
            <el-input v-model="edit.busname" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品描述" prop="detail">
            <el-input v-model="edit.detail"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" prop="img">
            <el-input v-model="edit.img"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="edit.price" type="number"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="ishot">
            <template>
              <el-switch
                style="width: 100%"
                v-model="edit.ishot"
                active-text="热门"
                inactive-text="普通"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </template>
          </el-form-item>
        </el-form>
        <el-button @click="hideeditbox()">取 消</el-button>
        <el-button type="primary" @click="updatedata()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详细列表 -->
    <el-dialog title="提示" :visible.sync="detailVisible" width="60%">
      <span>{{ detailobj.name }}</span>
      <el-descriptions title="详细信息" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名
          </template>
          {{ detailobj.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-home"></i>
            商家名
          </template>
          {{ detailobj.busname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-flag"></i>
            分类
          </template>
          {{ detailobj.catename }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            状态
          </template>
          <el-tag v-if="detailobj.ishot == '1' " size="small" type="danger">热门</el-tag>
          <el-tag v-else size="small">普通</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-finance"></i>
            当前价格
          </template>
          {{ detailobj.price }}
        </el-descriptions-item>
      </el-descriptions>
      <el-image style="width:100%" :src=detailobj.img lazy></el-image>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailVisible: false,
      newpwd: "",
      detailobj: "",
      show: false,
      editVisible: false,
      selectRoleId: "",
      searchwords: "",
      cates: [],
      edit: {
        ishot: "",
        busname: "",
        name: "",
        cateid: "",
        busid: "",
        img: "",
        detail: "",
        price: "",
        id: "",
        catename: "",
      },
      datalist: [],
      editFormRules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "商品名称长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        detail: [
          { required: true, message: "请输入商品描述", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "商品描述长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    this.show = !this.show;
  },
  methods: {
    hideaddbox() {
      this.addDialogClosed();
      this.addVisible = false;
    },
    hideeditbox() {
      this.editVisible = false;
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    searchdata() {
      if (this.searchwords === "") {
        this.$Message.error("请输入名称！");
        return;
      }
      this.$http
        .get("getgoodsbyname", {
          params: {
            words: this.searchwords,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$Message.success("查询成功！");
            this.datalist = res.data.data;
            this.searchwords = "";
          } else {
            this.$Message.error("查询失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统错误！" + err);
        });
    },
    getdata() {
      this.$http
        .get("getgoods")
        .then((res) => {
          if (res.data.code == 200) {
            this.datalist = res.data.data;
          } else {
            this.$Message.error("获取数据失败！");
          }
        })
        .catch((err) => {
          this.$Message.error("系统出错！" + err);
        });
    },
    showaddbox() {
      this.addVisible = true;
    },
    add() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        if (this.newData.pwd !== this.newData.twicepwd) {
          this.$Message.error("二次输入的密码不一致！");
          return;
        }
        let params = new URLSearchParams();
        params.append("token", window.sessionStorage.getItem("token"));
        params.append("loginname", this.newData.loginname);
        params.append("nike", this.newData.nike);
        params.append("pwd", this.newData.pwd);
        params.append("tel", this.newData.tel);
        params.append("address", this.newData.address);
        this.$http
          .post("addbus", params)
          .then((res) => {
            if (res.data.code == 200) {
              this.$Message.success("添加成功！");
              this.addVisible = false;
              this.getdata();
            } else {
              this.$Message.error(res.data.msg);
            }
          })
          .catch((err) => {
            this.$Message.error("系统错误！" + err);
          });
      });
    },
    showeditbox(obj) {
      this.edit.id = obj.id;
      this.edit.busname = obj.busname;
      this.edit.name = obj.name;
      this.edit.cateid = obj.cateid;
      this.edit.busid = obj.busid;
      this.edit.img = obj.img;
      this.edit.ishot = obj.ishot;
      this.edit.detail = obj.detail;
      this.edit.price = obj.price;
      this.edit.catename = obj.catename;
      this.editVisible = true;
    },
    updatedata() {
      this.$confirm("此操作将重新编辑该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("token", window.sessionStorage.getItem("token"));
          params.append("id", this.edit.id);
          params.append("name", this.edit.name);
          params.append("cateid", this.edit.cateid);
          params.append("busid", this.edit.busid);
          params.append("img", this.edit.img);
          params.append("detail", this.edit.detail);
          params.append("price", this.edit.price);
          params.append("ishot", this.edit.ishot);
          console.log(this.edit);
          this.$http
            .post("adminupdategood", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("更新成功");
                this.editVisible = false;
                this.getdata();
              } else {
                this.$Message.error("更新失败");
              }
            })
            .catch((err) => {
              this.$Message.error("系统出错！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消编辑",
          });
        });
    },
    deletedata(id) {
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("id", id);
          params.append("token", window.sessionStorage.getItem("token"));
          this.$http
            .post("admindeletegood", params)
            .then((res) => {
              if (res.data.code == 200) {
                this.$Message.success("删除成功！");
                this.getdata();
              } else {
                this.$Message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$Message.error("系统错误！" + err);
            });
        })
        .catch(() => {
          this.$Message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showdetailbox(obj) {
      this.detailobj = obj;
      this.detailVisible = true;
    },
  },
};
</script>

<style scoped>
.box-card {
  margin-top: 30px;
  width: 480ox;
}
</style>
